﻿
<div id="demo">
    <div class="row">

        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <button type="button" class="btn waves-effect waves-light btn-info mx-sm-2" v-on:click="OpenMode"><i class="fa fa-plus"></i> 新增</button>
                    <p />
                    <div class="table-responsive">
                        <table class="table  table-striped">
                            <thead>
                                <tr>
                                    <th>名称</th>
                                    <th class="text-nowrap">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="x in UserList">
                                    <td>{{x.TBU_NAME}}</td>
                                    <td class="text-nowrap">
                                        <a data-toggle="tooltip" data-original-title="Edit" v-on:click="OpenMode(x)"> <i class="fa fa-pencil text-inverse m-r-10"></i> </a>
                                        <a data-toggle="tooltip" data-original-title="Close" v-on:click="Delete(x)"> <i class="fa fa-close text-danger"></i> </a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>


    </div>

    <div id="UserModal" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <form class="modal-content" novalidate>
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">计量单位信息</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div>
                    <div class="form-body">

                        <div class="row">
                            <div class="col-lg-12">
                                <div class="card-outline-info">

                                    <div class="card-body">

                                        <div class="form-body">

                                            <div class="row">
                                                <div class="form-inline col-md-12">
                                                    <label class="form-Newlable">名称<span class="text-danger">*</span></label>
                                                    <input type="text" v-validate="'required'" name="名称" class="form-control" required v-model="GridData.TBU_NAME">
                                                </div>
                                            </div>
                                            <div class="row">
                                                <span style="color:red;text-align:right" v-cloak class="col-md-9">{{ errors.first('名称') }}</span>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn waves-effect waves-light btn-primary btn-info" v-on:click="saveData">保存</button>
                    <button type="button" class="btn waves-effect waves-light btn-default btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </form>
        </div>
    </div>


</div>



<script type="text/javascript">
    Vue.use(VeeValidate);
    VeeValidate.Validator.localize('zh_CN');

    VeeValidate.Validator.localize({
        zh_CN: {
            messages: {
                required: function (name) { return name + "不能为空"; },
                email: function () { return "邮箱格式无效"; }
            }
        }
    });
    var vm = new Vue({
        el: "#demo",
        data: {
            UserList: [],
            GridData: {
                TBU_DID: "",
                TBU_NAME: ""
            }
        }, mounted: function () {
            this.Query();
        },
        methods: {
            Query: function () {
                $(".preloader").fadeIn();//加载等待
                var _self = this;
                _self.UserList = [];
                $.post("../Essential/Unit?act=data",
                    function (data) {
                        data = JSON.parse(data);
                        for (var i = 0; i < data.data.length; i++) {
                            _self.UserList.push(data.data[i]);
                        }
                        $(".preloader").fadeOut();//取消加载等待
                    });
            },
            Delete: function (moX) {
                swal({
                    title: "确定要删除吗?",
                    text: "",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "是",
                    cancelButtonText: "否",
                    closeOnConfirm: false,
                    closeOnCancel: true
                }, function (isConfirm) {
                    if (isConfirm) {
                        $.post("../Essential/Unit", { act: 'delete', TBU_DID: moX.TBU_DID },
                            function (data) {
                                data = JSON.parse(data);
                                if (data.status === 0) {
                                    swal("操作成功!", "", "success");
                                    vm.Query();
                                } else {
                                    swal("操作失败!", data.message);
                                }
                            });
                    }
                });
            },
            OpenMode: function (moX) {
                this.GridData = Object.assign({}, moX);
                $('#UserModal').modal('toggle');
            },
            saveData: function () {

                this.$validator.validateAll().then((result) => {
                    if (result) {
                        $.post("../Essential/Unit?act=save", this.GridData,
                            function (data) {
                                data = JSON.parse(data);
                                if (data.status === 0) {
                                    swal("操作成功!", "", "success");
                                    vm.Query();
                                    $('#UserModal').modal('toggle');
                                } else {
                                    swal("提示!", data.message);
                                }
                            });
                    }
                })
            }
        }
    });
</script>
